<template>
  <el-card class="box">
    <div class="top">
      <span style="font-size: 25px; color: #203857; margin-right: 10px"
        >通知申请审核</span
      >
    </div>
    <el-form :model="selectForm" :inline="true">
      <el-form-item label="通知名">
        <el-input v-model="selectForm.title" placeholder="请输入通知名" />
      </el-form-item>
      <el-form-item label="学生名">
        <el-input v-model="selectForm.studentName" placeholder="请输入学生名" />
      </el-form-item>
      <el-form-item label="通知状态">
        <el-select
          v-model="selectForm.status"
          placeholder="请选择通知状态"
          style="width: 200px"
        >
          <el-option label="待审核" :value="0"></el-option>
          <el-option label="已通过" :value="1"></el-option>
          <el-option label="未通过" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学生班级">
        <el-input
          v-model="selectForm.studentClass"
          placeholder="请输入学生班级"
          style="width: 130px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="attachmentExport">
          <el-icon><Folder /></el-icon>附件导出
        </el-button>
        <el-button type="primary" @click="getNoticeList" plain
          ><el-icon><ZoomIn /></el-icon>筛选</el-button
        >
        <el-button @click="refreshList">清除筛选</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="datalist"
      stripe
      height="100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="40" />
      <el-table-column type="index" label="序号" width="55" align="center" />
      <el-table-column prop="createTime" label="申请时间" align="center" />
      <el-table-column
        prop="stuName"
        label="申请人"
        width="100"
        align="center"
      />
      <el-table-column
        prop="stuClass"
        label="班级"
        width="200"
        align="center"
      />
      <el-table-column prop="noticeTitle" label="通知名" align="center" />
      <el-table-column prop="status" label="通知状态" align="center">
        <template #default="{ row }">
          <span :style="{ color: statusColor[row.status] }">{{
            statusText[row.status]
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button
            type="success"
            size="small"
            icon="View"
            circle
            plain
            @click="preView(row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[3, 5, 7, 9]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>

    <!-- 附件详情 -->
    <Application ref="application" @refreshList="getApplications"></Application>
  </el-card>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick, provide } from "vue";
import { ElMessage } from "element-plus";
import { postApplications, exportAttachment } from "../../api/announcement";
import Application from "../../components/Notice/Application.vue";
import saveAs from "file-saver";

const pageSize = ref(3);
const currentPage = ref(1);
const application = ref(null);
// 定义初始数据
const selectForm = ref({
  title: "",
  studentName: "",
  status: null,
  studentClass: "",
});

const total = ref(0);
const datalist = ref([]);
const multipleSelection = ref([]);

const statusText = computed(() => ({
  0: "待审核",
  1: "已通过",
  2: "被驳回",
}));

const statusColor = computed(() => ({
  0: "#409EFF", // 待审核颜色
  1: "#008000", // 已通过颜色
  2: "#FF0000", // 未通过颜色
}));

const getApplications = async () => {
  console.log("开始查询数据");
  const res = await postApplications(
    currentPage.value,
    pageSize.value,
    selectForm.value
  );
  console.log("res:" + res);
  datalist.value = res.data;
  total.value = res.count;
  // selectForm.value = {};
};

const refreshList = () => {
  selectForm.value = {};
};

// 方法定义
const handleSelectionChange = (selection) => {
  multipleSelection.value = selection.map((item) => item.id);
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  getApplications();
};

const handleCurrentChange = (num) => {
  currentPage.value = num;
  getApplications();
};

onMounted(() => {
  getApplications();
});

const attachmentExport = async () => {
  try {
    if (multipleSelection.value.length === 0) {
      ElMessage.warning("请选择要导出的申请");
      return;
    }
    await exportAttachment(multipleSelection.value).then((response) => {
      saveAs(response, "附件导出.zip");
    });
    ElMessage.success("成功导出");
  } catch (error) {
    ElMessage.error("附件导出错误");
  }
};

const getNoticeList = async () => {
  getApplications();
};

// 根据 id 获取特定数据项
const getApplicationById = (id) => {
  console.log("getApplicationById:" + id);
  return datalist.value.find((item) => item.id === id);
};

const preView = (id) => {
  console.log("getApplicationById:" + id);
  const data = getApplicationById(id);
  nextTick(() => {
    if (application.value) {
      provide("refreshList", getApplications);
      application.value.showAttachments(id, data);
    } else {
      ElMessage.error("附件列表组件未加载完成");
    }
  });
};
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  padding: 15px;
  position: relative;
  .el-pagination {
    position: absolute;
    bottom: 25px;
  }
}
.top {
  display: flex;
  width: 100%;
  height: 50px;
  line-height: 50px;
  align-items: center;
  margin-bottom: 15px;
}
.my-header {
  display: flex;
  align-items: center;
}

.imgtitle {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.titleClass {
  font-size: 18px;
  font-weight: bold;
}

.titleendClass {
  font-size: 16px;
}
</style>
